<template>
  <div style="border: 1px solid #bdbdbd" class="panel-group">
    <div class="text">
      <span>运营数据</span>
      <el-button-group class="time-type">
        <el-button
          :type="buttonWeek"
          :class="{ active: activeTitle === 'week' }"
          size="small"
          class="block"
          @click="changeEhart('week')"
          >最近7天</el-button
        >
        <el-button
          :type="buttonMonth"
          :class="{ active: activeTitle === 'month' }"
          size="small"
          class="block"
          @click="changeEhart('month')"
          >最近30天</el-button
        >
      </el-button-group>
    </div>
    <div style="margin-top: 10px; padding-left: 20px; padding-right: 20px">
      <el-table
        :data="list"
        border
        :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
      >
        <el-table-column
          label="店铺名称"
          prop="storeName"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="销售额"
          prop="salesAmount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="支付订单数"
          prop="payOrderCount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="下单人数"
          align="center"
          prop="placeOrderCount"
        ></el-table-column>
        <el-table-column
          label="会员数量"
          align="center"
          prop="memberCount"
        ></el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.size"
        :page-sizes="[5, 10, 15]"
        :current-page.sync="listQuery.current"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- <el-row :gutter="0">
      <el-col :span="4" class="card-panel-col">
        <div class="card-count-col" style="">
          <count-to
            :start-val="0"
            :end-val="sumSales"
            :decimals="2"
            :duration="2600"
            class="card-panel-num"
          />
          <div class="card-panel-text">销售额(元)</div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-count-col">
          <count-to
            :start-val="0"
            :end-val="paymentOrder"
            :duration="2600"
            class="card-panel-num"
          />
          <div class="card-panel-text">支付订单数</div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-count-col">
          <count-to
            :start-val="0"
            :end-val="orderUserNum"
            :duration="2600"
            class="card-panel-num"
          />
          <div class="card-panel-text">下单人数</div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-count-col">
          <count-to
            :start-val="0"
            :end-val="refundAmount"
            :duration="2600"
            class="card-panel-num"
          />
          <div class="card-panel-text">普通会员</div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-count-col">
          <count-to
            :start-val="0"
            :end-val="refundOrder"
            :duration="2600"
            class="card-panel-num"
          />
          <div class="card-panel-text">店长人数</div>
        </div>
      </el-col>
      <el-col :span="4" class="card-panel-col">
        <div class="card-count-col">
          <div class="card-count-col">
            <count-to
              :start-val="0"
              :end-val="memberNum"
              :duration="2600"
              class="card-panel-num"
            />
            <div class="card-panel-text">代理商人数</div>
          </div>
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
import CountTo from "vue-count-to";
import { panelGroup } from "@/api/wel";
import moment from "moment";

export default {
  components: {
    CountTo,
  },
  data() {
    return {
      activeTitle: "week",
      buttonToday: "primaty",
      buttonWeek: "",
      buttonMonth: "",
      list: [],
      listQuery: {
        current: 1,
        size: 10,
        startTime: null,
        endTime: null,
      },
      total: 0,
    };
  },
  mounted() {
    this.currentTime();
    this.changeEhart("week");
  },
  methods: {
    async changeEhart(type) {
      this.activeTitle = type;

      var BeginTime;
      var EndTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");

      if (typeof type !== "object") {
        if (type === "today") {
          this.buttonToday = "primaty";
          this.buttonWeek = "";
          this.buttonMonth = "";
          BeginTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
        } else if (type === "week") {
          this.buttonToday = "";
          this.buttonWeek = "primaty";
          this.buttonMonth = "";
          BeginTime = moment(new Date() - 86400000 * 6).format(
            "YYYY-MM-DD hh:mm:ss"
          );
        } else if (type === "month") {
          this.buttonToday = "";
          this.buttonWeek = "";
          this.buttonMonth = "primaty";
          BeginTime = moment(new Date() - 86400000 * 29).format(
            "YYYY-MM-DD hh:mm:ss"
          );
        }
      } else {
        BeginTime = type[0];
        EndTime = type[1];
      }

      this.listQuery.startTime = BeginTime;
      this.listQuery.endTime = EndTime;

      panelGroup(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.changeEhart();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.changeEhart();
    },
    currentTime() {
      setInterval(this.getDate, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
.panel-group {
  width: 100%;
  background-color: #ffffff;
  .text {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 5px 20px;
    border-bottom: 1px solid #bdbdbd;
    .active:focus,
    .active:hover {
      color: #409eff;
    }
    .block {
      color: black;
    }
  }

  .card-panel-col {
    height: 140px;
    .card-count-col {
      position: relative;
      right: 0;
      left: 0;
      top: 25%;
      text-align: center;
      .card-panel-num {
        font-size: 35px;
        color: #3398e5;
      }
      /*div {*/
      /*  padding-top: 15px;*/
      /*}*/
    }
  }
}

.card-panel-description {
  font-weight: bold;
  .card-panel-num {
    font-size: 36px;
    color: #3398e5;
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1),
      0px 9px 4px rgba(0, 0, 0, 0.12);
  }
  .card-panel-text {
    font-size: 14px;
    margin-top: 12px;
    color: #3398e5;
  }
}
</style>
